<template>
  <div class="villagecont" style="max-height: 680px;overflow: auto;">
  <!-- <div class="villagecont" style="max-height: 720px;overflow: auto;"> -->
    <div class="villageCardTitle">
      <!-- {{VillageModelData.vm.Adnm}} -->
      <!-- ({{ VillageModelData.vm.Adcd }}) -->
    </div>
    <div style="position: relative;" 
     v-loading="loading"
     element-loading-text="加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
     >
      <!-- <div class="formData">
        <el-row>
          <el-col :span="6">村庄名称：<span>{{ VillageModelData.vm.adnm }}</span></el-col>
          <el-col :span="6">村庄编码：<span>{{ VillageModelData.vm.adcd }}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">总人口：<span>{{ VillageModelData.vm.pCount }}人</span></el-col>
          <el-col :span="6">总户数：<span>{{ VillageModelData.vm.htCount }}户</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">总房屋数：<span>{{ VillageModelData.vm.etCount }}座</span></el-col>
          <el-col :span="6">耕地面积：<span>{{ VillageModelData.vm.plArea }}亩</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">准备转移：<span>{{ VillageModelData.vm.zl1 }}(1小时)</span></el-col>
          <el-col :span="6"><span>{{ VillageModelData.vm.zl2 }}(2小时)</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">立即转移：<span>{{ VillageModelData.vm.ll1 }}(1小时)</span></el-col>
          <el-col :span="6"><span>{{ VillageModelData.vm.ll2 }}(2小时)</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">流域面积：<span>{{ VillageModelData.vm.wsarea }}km²</span></el-col>
          <el-col :span="6">平均坡度：<span>{{ VillageModelData.vm.wsslp }}</span></el-col>
           <el-col :span="6">自动监测站：<span>{{ VillageModelData.vm.stCount }}个</span></el-col>
          <el-col :span="6">简易雨量站：<span>{{ VillageModelData.vm.srsCount }}个</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">简易水位站：<span>{{ VillageModelData.vm.swsCount }}个</span></el-col>
          <el-col :span="6">无线预警广播站：<span>{{ VillageModelData.vm.wbrCount }}个</span></el-col>
          <el-col :span="6">桥梁：<span>{{ VillageModelData.vm.briCount }}座</span></el-col>
          <el-col :span="6">路涵：<span>{{ VillageModelData.vm.culCount }}座</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">塘(堰)坝：<span>{{ VillageModelData.vm.damCount }}座</span></el-col>
          <el-col :span="18">所属政区：<span>{{ VillageModelData.vm.fullAddvnm}}</span></el-col> 
        </el-row>
      </div> -->
      <!-- 村庄信息 -->
      <div class="JibenTable">
        <ul>
          <li><div><div>村庄名称：</div><div>{{VillageModelData.vm.adnm ? VillageModelData.vm.adnm : '--' }}</div></div></li>
          <li><div><div>村庄编码：</div><div>{{VillageModelData.vm.adcd ? VillageModelData.vm.adcd : '--' }}</div></div></li>
          <li><div><div>总人口：</div><div>{{VillageModelData.vm.pCount ? VillageModelData.vm.pCount : '--' }}人</div></div></li>
          <li><div><div>总户数：</div><div>{{VillageModelData.vm.htCount ? VillageModelData.vm.htCount : '--' }}户</div></div></li>
          <li><div><div>总房屋数：</div><div>{{VillageModelData.vm.house ? VillageModelData.vm.house : '--' }}座</div></div></li>
          <li><div><div>耕地面积：</div><div>{{VillageModelData.vm.plArea ? VillageModelData.vm.plArea : '--' }}亩</div></div></li>
          <li><div><div>准备转移：</div><div>1小时/2小时 &nbsp; {{VillageModelData.vm.zl1 ? VillageModelData.vm.zl1 : '--' }} &nbsp;/ &nbsp;{{ VillageModelData.vm.zl2? VillageModelData.vm.zl2 : '--' }}</div></div></li>
          <li><div><div>立即转移：</div><div>1小时/2小时 &nbsp; {{VillageModelData.vm.ll1 ? VillageModelData.vm.ll1 : '--' }} &nbsp;/ &nbsp;{{ VillageModelData.vm.ll2? VillageModelData.vm.ll2 : '--' }}</div></div></li>
          <li><div><div>流域面积：</div><div>{{VillageModelData.vm.wsarea ? VillageModelData.vm.wsarea : '--' }}km²</div></div></li>
          <li><div><div>平均坡度：</div><div>{{VillageModelData.vm.wsslp ? VillageModelData.vm.wsslp : '--' }}</div></div></li>
          <li><div><div>自动监测站：</div><div>{{VillageModelData.vm.stCount ? VillageModelData.vm.stCount : '--' }}个</div></div></li>
          <li><div><div>简易雨量站：</div><div>{{VillageModelData.vm.srsCount ? VillageModelData.vm.srsCount : '--' }}个</div></div></li>
          <li><div><div>简易水位站：</div><div>{{VillageModelData.vm.swsCount ? VillageModelData.vm.swsCount : '--' }}个</div></div></li>
          <li><div><div>无线预警广播站：</div><div>{{VillageModelData.vm.wbrCount ? VillageModelData.vm.wbrCount : '--' }}个</div></div></li>
          <li><div><div>桥梁：</div><div>{{VillageModelData.vm.briCount ? VillageModelData.vm.briCount : '--' }}座</div></div></li>
          <li><div><div>路涵：</div><div>{{VillageModelData.vm.culCount ? VillageModelData.vm.culCount : '--' }}座</div></div></li>
          <li><div><div>塘(堰)坝：</div><div>{{VillageModelData.vm.damCount ? VillageModelData.vm.damCount : '--' }}座</div></div></li>
          <li><div><div>所属政区：</div><div>{{VillageModelData.vm.fullAddvnm ? VillageModelData.vm.fullAddvnm : '--' }}</div></div></li>
        </ul>
      </div>
      <template v-if="VillageModelData.vm.lstImage.length>0">
        <div class="block imgList">
          <el-carousel height="100%" :arrow="VillageModelData.vm.lstImage.length== 1? 'never' : 'always'">
            <el-carousel-item v-for="(item, i) in VillageModelData.vm.lstImage" :key="i">
              <img :src="item.fPath">
              <div>{{ item.fPath }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
      <template v-else >
        <div class="imgList noImgList">
          <div class="empty"> </div>
          <img src="@/assets/dialog/noImgIcon.png" alt="">
        </div>
      </template>
    </div>
    <!-- 村庄详情end -->
    <!-- 防治区基本情况 -->
    <template >
      <div class="subtitle">防治区基本情况</div>
      <!-- <el-table :data="VillageModelData.lstPrevad" border class="flagTable" height="200px" style="width: 100%"> -->
      <el-table :data="VillageModelData.lstPrevad" border class="flagTable"  style="width: 100%">
        <template slot="empty" class="emptyData">
          <img class="emptyDataImg" src="@/assets/dialog/NoDataicon.png" alt="">
        </template>
        <el-table-column align="center" prop="adnm" label="名称" />
        <el-table-column align="center" prop="ptCount" label="人口(人)" />
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="etCount" label="总户数" />
          <el-table-column align="center" prop="eCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="eCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="eCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="eCount4" label="Ⅳ类" />
        </el-table-column>
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="htCount" label="总住房数" />
          <el-table-column align="center" prop="hCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="hCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="hCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="hCount4" label="Ⅳ类" />
        </el-table-column>
      </el-table>
    </template>
    <!-- 防治区基本情况 end -->
    <template v-if="VillageModelData.danadImage">
      <div class="villageCardTitle">危险区示意图</div>
      <img class="imgStyle" :src="VillageModelData.danadImage.fPath" alt="">
    </template>
    <template v-if="VillageModelData.warningImage">
      <div class="villageCardTitle">预警指标</div>
      <img class="imgStyle" :src="VillageModelData.warningImage.fPath" alt="">
    </template>
    <template
      v-if="VillageModelData.lstDesntb || VillageModelData.lstSdtdtb || VillageModelData.lstSwllrktb || VillageModelData.lstNowfhtb || VillageModelData.lstDfwrule"
    >
      <!-- <h3>分析评价成果</h3> -->
      <div class="subtitle">分析评价成果</div>
    </template>
    <template v-if="VillageModelData.lstDesntb">
      <div class="villageCardTitle">设计暴雨成果表</div>
      <el-table :data="VillageModelData.lstDesntb" border style="width: 100%">
        <el-table-column align="center" prop="intv" label="历时" />
        <el-table-column align="center" prop="hValue" label="均值" />
        <el-table-column align="center" prop="cv" label="变差系数(Cv)" />
        <el-table-column align="center" prop="cscv" label="Cs/Cv" />
        <el-table-column align="center" label="重现期雨量值(Hp)">
          <el-table-column align="center" prop="h1" label="百年一遇(mm)" />
          <el-table-column align="center" prop="h2" label="50年一遇(mm)" />
          <el-table-column align="center" prop="h5" label="20年一遇(mm)" />
          <el-table-column align="center" prop="h10" label="10年一遇(mm)" />
          <el-table-column align="center" prop="h20" label="5年一遇(mm)" />
        </el-table-column>
      </el-table>
    </template>
    <template v-if="VillageModelData.lstSdtdtb">
      <div class="villageCardTitle">控制断面洪水成果表</div>
      <el-table :data="VillageModelData.lstSdtdtb" border style="width: 100%">
        <!-- <el-table-column align="center" prop="Name" label="洪水要素">
          <template slot-scope="scope">
            <template v-if="scope.row.name == '洪峰流量'">{{ scope.row.name }}(m³/s)</template>
            <template v-else-if="scope.row.name == '洪量'">{{ scope.row.name }}(m³)</template>
            <template v-else-if="scope.row.name == '涨洪历时'">{{ scope.row.name }}(h)</template>
            <template v-else-if="scope.row.name == '洪水历时'">{{ scope.row.name }}(h)</template>
            <template v-else-if="scope.row.name == '洪峰水位'">{{ scope.row.name }}(m)</template>
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="name" label="洪水要素" />
        <el-table-column align="center" label="重现期雨量值(Hp)">
          <el-table-column align="center" prop="h100" label="百年一遇(mm)" />
          <el-table-column align="center" prop="h50" label="50年一遇(mm)" />
          <el-table-column align="center" prop="h20" label="20年一遇(mm)" />
          <el-table-column align="center" prop="h10" label="10年一遇(mm)" />
          <el-table-column align="center" prop="h5" label="5年一遇(mm)" />
        </el-table-column>
      </el-table>
    </template>
    <template v-if="VillageModelData.lstSwllrktb">
      <div class="villageCardTitle">控制断面水位-流量-人口表</div>
      <el-table :data="VillageModelData.lstSwllrktb" border style="width: 100%">
        <el-table-column align="center" prop="z" label="水位(m)" />
        <el-table-column align="center" prop="q" label="流量(m³/s)" />
        <el-table-column align="center" prop="cxq" label="重现期(年)" />
        <el-table-column align="center" prop="pCount" label="人口(人)" />
        <el-table-column align="center" prop="hCount" label="户数(户)" />
        <el-table-column align="center" prop="hnCount" label="房屋数(座)" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstNowfhtb">
      <div class="villageCardTitle">防洪现状评价成果表</div>
      <el-table :data="VillageModelData.lstNowfhtb" border style="width: 100%">
        <el-table-column align="center" prop="plarea" label="防洪能力(年)" />
        <el-table-column align="center" label="极高(小于5年一遇)">
          <el-table-column align="center" prop="mxpn" label="人口(人)" />
          <el-table-column align="center" prop="mxhn" label="房屋(座)" />
        </el-table-column>
        <el-table-column align="center" label="高危(5-20年一遇)">
          <el-table-column align="center" prop="senpn" label="人口(人)" />
          <el-table-column align="center" prop="senhn" label="房屋(座)" />
        </el-table-column>
        <el-table-column align="center" label="危险(大于20年一遇)">
          <el-table-column align="center" prop="wxpn" label="人口(人)" />
          <el-table-column align="center" prop="wxhn" label="房屋(座)" />
        </el-table-column>
      </el-table>
    </template>
    <template v-if="VillageModelData.lstDfwrule">
      <div class="villageCardTitle">预警指标成果表</div>
      <el-table :data="VillageModelData.lstDfwrule" border style="width: 100%">
        <el-table-column align="center" prop="stdt" label="时段" />
        <el-table-column align="center" label="预警指标">
          <el-table-column align="center" prop="zbDrp" label="准备转移(mm)" />
          <el-table-column align="center" prop="ljDrp" label="立即转移(mm)" />
        </el-table-column>
        <el-table-column align="center" prop="lWater" label="前期土壤含水量" />
        <el-table-column align="center" prop="calMath" label="方法" />
        <el-table-column align="center" prop="remark" label="备注" />
      </el-table>
    </template>
    <template v-if="VillageModelData.ws">
      <!-- <h3>小流域基本信息</h3> -->
      <div class="subtitle">小流域基本信息</div>
      <!-- <div class="formData" style="text-align: right;">
        <el-row>
          <el-col :span="12">小流域编码：<span class="formDataVal">{{ VillageModelData.ws.wscd || "-" }}</span>
          </el-col>
          <el-col :span="12">流域级别：<span class="formDataVal">{{ VillageModelData.ws.wscs || "-" }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">面积(km²)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.wsArea/1000000,2) || "-" }}</span>
          </el-col>
          <el-col :span="12">平均坡度：<span class="formDataVal">{{ VillageModelData.ws.wsslpW || "-" }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">形状系数：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.wsshpc,2) || "-" }}</span></el-col>
          <el-col :span="12">最长汇流路径比降(‰)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.maxLslp,2) || "-" }}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">最长汇流路径长度(m)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.maxLen,3) || "-" }}</span></el-col>
          <el-col :span="12">形心高程(m)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.centerelv,2) || "-" }}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">出口高程(m)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.outletelv,2) || "-" }}</span></el-col>
          <el-col :span="12">最大高程(m)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.maxelv,2) || "-" }}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">河段长度(m)：<span class="formDataVal">{{ VillageModelData.ws.rvlen || "-" }}</span>
          </el-col>
          <el-col :span="12">河段比降(‰)：<span
            class="formDataVal"
          >{{ numFilter(VillageModelData.ws.rvslp,2) || "-" }}</span></el-col>
        </el-row>
      </div> -->
      <div class="JibenTable2">
        <ul>
          <li><div><div>小流域编码：</div><div>{{VillageModelData.ws.wscd || "-" }}</div></div></li>
          <!-- <li><div><div>流域级别：</div><div>{{VillageModelData.ws.wscs || "-" }}</div></div></li> -->
          <li><div><div>面积(km²)</div><div>{{numFilter(VillageModelData.ws.wsArea/1000000,2) || "-" }}</div></div></li>
          <li><div><div>平均坡度：</div><div>{{VillageModelData.ws.wsslp || "-" }}</div></div></li>
          <li><div><div>形状系数：</div><div>{{numFilter(VillageModelData.ws.wsshpc,2) || "-"  }}</div></div></li>
          <li><div><div>最长汇流路径比降(‰)：</div><div>{{numFilter((VillageModelData.ws.maxLslp*1000),2) || "-"  }}</div></div></li>
          <li><div><div>最长汇流路径长度(m)：</div><div>{{numFilter(VillageModelData.ws.maxLen,3) || "-"  }}</div></div></li>
          <li><div><div>形心高程(m)：</div><div>{{numFilter(VillageModelData.ws.centerelv,2) || "-" }}</div></div></li>
          <li><div><div>出口高程(m)：</div><div>{{numFilter(VillageModelData.ws.outletelv,2) || "-" }}</div></div></li>
          <li><div><div>最大高程(m)：</div><div>{{numFilter(VillageModelData.ws.maxelv,2) || "-" }}</div></div></li>
          <li><div><div>河段长度(m)：</div><div>{{VillageModelData.ws.rvlen || "-" }}</div></div></li>
          <li><div><div>河段比降(‰)：</div><div>{{numFilter((VillageModelData.ws.rvslp*1000),2) || "-" }}</div></div></li>
        </ul>
      </div>
    </template>
    <template
      v-if=" VillageModelData.lstDanad || VillageModelData.lstStInfo || VillageModelData.lstSrStInfo || VillageModelData.lstSwStInfo || VillageModelData.lstWbrInfo || VillageModelData.lstBridge || VillageModelData.lstCurvert || VillageModelData.lstDamInfo"
    >
      <!-- v-if="VillageModelData.lstPrevad || VillageModelData.lstDanad || VillageModelData.lstStInfo || VillageModelData.lstSrStInfo || VillageModelData.lstSwStInfo || VillageModelData.lstWbrInfo || VillageModelData.lstBridge || VillageModelData.lstCurvert || VillageModelData.lstDamInfo"
    > -->
      <!-- <h3>现场调查成果</h3> -->
      <div class="subtitle">现场调查成果</div>
    </template>
    <!-- <template v-if="VillageModelData.lstPrevad">
      <div class="villageCardTitle">防治区基本情况</div>
      <el-table :data="VillageModelData.lstPrevad" border style="width: 100%">
        <el-table-column align="center" prop="adnm" label="名称" />
        <el-table-column align="center" prop="ptCount" label="人口(人)" />
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="etCount" label="总户数" />
          <el-table-column align="center" prop="eCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="eCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="eCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="eCount4" label="Ⅳ类" />
        </el-table-column>
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="htCount" label="总住房数" />
          <el-table-column align="center" prop="hCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="hCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="hCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="hCount4" label="Ⅳ类" />
        </el-table-column>
      </el-table>
    </template> -->
    <template v-if="VillageModelData.lstDanad">
      <div class="villageCardTitle">危险区</div>
      <el-table :data="VillageModelData.lstDanad" border style="width: 100%">
        <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="ptCount" label="人口(人)" />
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="etCount" label="总户数" />
          <el-table-column align="center" prop="eCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="eCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="eCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="eCount4" label="Ⅳ类" />
        </el-table-column>
        <el-table-column align="center" label="家庭经济状况(户)">
          <el-table-column align="center" prop="htCount" label="总住房数" />
          <el-table-column align="center" prop="hCount1" label="Ⅰ类" />
          <el-table-column align="center" prop="hCount2" label="Ⅱ类" />
          <el-table-column align="center" prop="hCount3" label="Ⅲ类" />
          <el-table-column align="center" prop="hCount4" label="Ⅳ类" />
        </el-table-column>
      </el-table>
    </template>
    <template v-if="VillageModelData.lstStInfo">
      <div class="villageCardTitle">自动监测站</div>
      <el-table :data="VillageModelData.lstStInfo" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stcd" label="测站编码" />
        <el-table-column align="center" prop="stnm" label="测站名称" />
        <el-table-column align="center" prop="stlc" label="站址" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstSrStInfo">
      <div class="villageCardTitle">简易雨量站</div>
      <el-table :data="VillageModelData.lstSrStInfo" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bDate" label="建站时间" />
        <el-table-column align="center" prop="feature" label="功能" />
        <el-table-column align="center" prop="address" label="站址" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstSwStInfo">
      <div class="villageCardTitle">简易水位站</div>
      <el-table :data="VillageModelData.lstSwStInfo" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bDate" label="建站时间" />
        <el-table-column align="center" prop="feature" label="功能" />
        <el-table-column align="center" prop="address" label="站址" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstWbrInfo">
      <div class="villageCardTitle">无线预警广播站</div>
      <el-table :data="VillageModelData.lstWbrInfo" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bDate" label="建站时间" />
        <el-table-column align="center" prop="feature" label="功能" />
        <el-table-column align="center" prop="address" label="站址" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstBridge">
      <div class="villageCardTitle">桥梁</div>
      <el-table :data="VillageModelData.lstBridge" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="桥梁名称" />
        <el-table-column align="center" prop="type" label="桥梁类型" />
        <el-table-column align="center" prop="length" label="桥长" />
        <el-table-column align="center" prop="width" label="桥宽" />
        <el-table-column align="center" prop="height" label="桥高" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstCurvert">
      <div class="villageCardTitle">路涵</div>
      <el-table :data="VillageModelData.lstCurvert" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="路涵名称" />
        <el-table-column align="center" prop="type" label="路涵类型" />
        <el-table-column align="center" prop="length" label="涵洞长" />
        <el-table-column align="center" prop="width" label="涵洞宽" />
        <el-table-column align="center" prop="height" label="涵洞高" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstDamInfo">
      <div class="villageCardTitle">塘(堰)坝</div>
      <el-table :data="VillageModelData.lstDamInfo" border style="width: 100%">
        <el-table-column align="center" prop="序号" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="塘堰名称" />
        <el-table-column align="center" prop="type" label="挡水主坝类型" />
        <el-table-column align="center" prop="xhst" label="容积" />
        <el-table-column align="center" prop="width" label="坝高" />
        <el-table-column align="center" prop="height" label="涵洞高" />
      </el-table>
    </template>
    <template v-if="VillageModelData.lstHsurface || VillageModelData.lstVsurface">
      <!-- <h3>断面测量</h3>
      <div id="CrossSectionChart" style="width:100%;height:400px" />
      <div id="VerticalSectionChart" style="width:100%;height:400px" /> -->
    </template>
  </div>
</template>

<script>
import {
    GetVillageModel
} from '@/api/zyx.js'
export default {
    components: {
    },
    data() {
        return {
            VillageModelData: {
              vm:{
                lstImage:[],
              },
              
            },
            parameter: {},
            loading:false,
        }
    },
    created() {
        const getVillageParmas = this.$store.getters.dlgParams.params
        this.parameter = getVillageParmas
        this.GetVillageData() // 获取村庄详情
    },
    methods: {
        GetVillageData() {
            const param = {
                Adcd: this.parameter.Ewcode
            }
            this.loading = true;
            GetVillageModel(param).then((res) => {
              this.loading = false
                if (res.isSuccess) {
                  let dat = res.data;
                  if(dat){
                      this.VillageModelData = res.data
                  }else{
                     this.$message.success(res.message);
                  }
                   
                   // console.log(this.VillageModelData)
                } else {
                    this.$message.error(res.message)
                }
            }).catch(err=>{
              this.loading = false
            })
        },
        // 截取当前数据到小数点后两位
        numFilter(value, num) {
            const realVal = parseFloat(value).toFixed(num)
            return realVal
        }
    }
}
</script>

<style lang="less" scoped>
	.villageCardTitle {
		line-height: 40px;
		// background: #163666;
		margin-top: 10px;
		padding-left: 10px;
		position: relative;
		background: url('~@/assets/newimg/littletitle_icon.png') no-repeat left center;
		text-indent: 1.875rem;
	}

	// .villageCardTitle::after {
	// 	content: "";
	// 	width: 4px;
	// 	background-color: #0449aa;
	// 	height: 34px;
	// 	position: absolute;
	// 	left: 0;
	// }

	.formData {
		margin-top: 10px;
		line-height: 44px;
		padding: 0 20px;

		.formDataVal {
			display: inline-block;
			width: 50%;
			text-align: left;
			font-weight: normal;
		}
	}

	/deep/ .el-col-6,
	/deep/ .el-col-12,/deep/ .el-col-18 {
		border-bottom: 1px solid #161e72;
		font-weight: bold;
	}

	/deep/ .el-col-6 span {
		font-weight: normal;
	}

	.imgList {
		width: 50%;
		//height: 220px;
    height: 100%;
		position: absolute;
		right: 0;
		top: 0px;
		background-color: #161e72;

		img {
			width: 100%;
			height: 100%;
		}

		/deep/.el-carousel__item,
		/deep/.el-carousel {
			//height: 220px;
			height: 100%;
		}
	}

	.noImgList {
		text-align: center;
		//line-height: 220px;
		line-height: 440px;
		color: #0449aa;
		font-size: 18px;
		font-weight: bold;
    img{
      width:100px;
      height:110px;
    }
	}

	.imgStyle {
		display: block;
		width: 100%;
		height: auto;
		background-color: #161e72;
	}

	/deep/.dialog_info {
		height: 100%;

		.dialog_info_title {
			height: 100%;

			/deep/.el-tabs {
				height: 100%;

				/deep/.el-tab-pane {
					height: 100%;
					overflow: auto;
				}
			}
		}
	}
   .el-table /deep/thead{
     color:#fff;
   }
   .villagecont{
     margin-right: -10px;
     padding-right: 10px;
    .el-table{
      border: 1px solid #4285A6;
    }
     .el-table /deep/thead{
       .el-table__cell{
         border: 1px solid #4285A6;
       }
     }
     .el-table /deep/tbody tr{
         border: 1px solid #4285A6;
         background: none !important;;
         
     }
     .el-table--enable-row-transition .el-table__body td.el-table__cell{
      border: 1px solid #4285A6;
     }
     .el-table /deep/th .el-table__cell, .el-table /deep/tr .el-table__cell{
      border: 1px solid #4285A6;
      border-left: none;
      border-top: none;
     }
     
   }
	
  .rainInfo_top {
    width: 632px;
    //height: 548px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
        margin-top: 10px;
        &>:nth-child(1){
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            background: rgba(0,165,233,0.3);
            padding: 10px 0 ;
            font-size: 14px;
            >div{
              width: 50% !important;
                box-sizing: border-box;
                //flex: 1;
                color: #fff;
               //border-left: 1px solid #4285A6;
                padding: 3px 0 3px 10px;
                border-bottom: 1px solid #4285A6;
                margin: 3px 0;
                >div{
                    position: relative;
                    background: url(../../assets/newimg/矩形.png) no-repeat left center;
                    background-size: auto 66%;
                    &>:nth-child(1){
                        color: #A5C2D8;
                        margin-bottom: 4px;
                    }
                    span {
                        color: #fff;
                        display: block;
                        text-indent: 14px;
                    }
                    
                }

                >div::before{
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 1px;
                  height: 100%;
                  z-index: 1;
                  background-color: #4285A6;
                  margin-left: -8px;
                }

            }
            
            &>:nth-child(1){
                border: none;
                border-bottom: 1px solid #4285A6;
            }
            &>:nth-last-child(1), &>:nth-last-child(2){
                border: none;
            }
        }
        >div:nth-child(2){
            width: 31%;
        }
        >div:nth-child(3){
            width: 40%;
            text-indent: 30px;
            text-align: left;
        }
		.rainInfo_top_btn_span {
			span {
				background-color: #102065;
				color: #fff;
				border-color: #1e2f74;
			}
		}
	}
  .subtitle{
    height: 28px;
    line-height: 0px;
    margin: 20px 0 4px 0;
    text-indent: 4px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    background: url(../../assets/dialog/dialogBT.png) no-repeat center;
    background-size: 100% 100%;
}
/deep/ .subtitle .flagTable .el-table__body tr .cell {
  height: 15px;
  line-height: 15px;
}
/deep/ .subtitle .flagTable .el-table {
  background-color: rgba(0,150,255,0.3);;
}

/deep/ .el-table th.el-table__cell>.cell {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #21DDFF;
}
.emptyData{
  display: flex;
  justify-content: center;
  align-items: center;
}
  .emptyDataImg{
    width: 50px;
    height: 70px;
  }
  /deep/ .el-table__empty-text{
    line-height: 0px;
  }

  .JibenTable {
    width: 632px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        li{
            box-sizing: border-box;
            width: 50%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2){
          border: none;
        }
        &>:nth-child(2n-1){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}
  .JibenTable2 {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        li{
            box-sizing: border-box;
            width: 25%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2) ,>:nth-last-child(3){
          border: none;
        }
        &>:nth-child(1),>:nth-child(5),>:nth-child(9){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}
</style>